<template>
  <div id="Circlering" style="height: 100%; width: 100%;" />
</template>
<script>
import echarts from 'echarts'

export default {
  name: 'Circlering',
  data() {
    return {
    }
  },
  computed: {
  },
  created() {

  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      var myChart = echarts.init(document.getElementById('Circlering'))
      const option = {
        title: {
          text: '网站访问量情况',
          subtext: '单位（人）'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            color: ['#00A99D', '#FE8463', '#ccff60', '#00d8f9'],
            center: ['50%', '45%'], // 左右,上下
            // avoidLabelOverlap: false,//是否启用防止标签重叠策略,改为true之后就不会重叠
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            // labelLine: {
            //   show: false
            // },
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
